<template>
  <div class="user-setting">
    <!-- 登录 -->
    <div class="head-picture">
      <img :src="userInfo.headPicture" alt="">
    </div>
    <div class="user-name">
      {{userInfo.nickName}}
    </div>
    <div class="logout">
      <el-link type="warning" @click="logout">退出</el-link>
    </div>
  </div>
</template>

<script>
import { removeToken } from "utils/auth";
export default {
  mounted() {},
  computed:{
    userInfo(){
     return  this.$store.state.user.userInfo
    }       
  },
  methods: {
    logout() {
      removeToken();
      this.$store.commit("user/clearUserInfo")
      this.$store.commit("permission/clearAccessRoute")
      this.$router.push({
        path: "/login",
      });
    },
  },
}
</script>

<style lang="scss" scoped>
.user-setting {
  width: 450px;
  display: flex;
  justify-content: end;
  cursor: pointer;
  .head-picture{
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 50%;
    margin-right: 10px;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .user-name{
    margin-right: 10px;
    line-height: 32px;
  }
  .logout{
     line-height: 32px;
  }
}

</style>